<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //1、数据表格
        var arr = [
          { name: 'Jack', age: 18, gender: '男' },
          { name: 'Rose', age: 20, gender: '女' },
          { name: 'Top', age: 22, gender: '男' },
        ];
        var table = document.createElement('table');
        let title_tr = document.createElement('tr');
        for (let i = 0; i < Object.keys(arr[0]).length; i++) {
          let td = document.createElement('td');
          td.innerText = Object.keys(arr[0])[i];
          td.style.border = '1px black solid';
          title_tr.appendChild(td);
        }
        table.appendChild(title_tr);
        arr.forEach((item, index, arr) => {
          let tr = document.createElement('tr');
          for (let key in item) {
            let td = document.createElement('td');
            td.innerText = item[key];
            td.style.border = '1px black solid';
            tr.appendChild(td);
          }
          table.appendChild(tr);
        });
        table.style.borderSpacing = '0px';
        table.style.textAlign = 'center';
        document.body.appendChild(table);

        //2、隔行变色
        let table1 = document.querySelector('table');
        let trs = table1.querySelectorAll('tr');
        trs.forEach((item,index) => {
            if((index+1)%2==0){
              item.style.backgroundColor='rgba(200,200,200,.5)'
            }
        });
      //3 实现流氓广告的关闭 （div里有一个 X 点击x的时候可以关闭div，但是过4秒后div又会显示出来）
      //   var container = document.createElement('div');
      //   var span = document.createElement('span');
      //   var a = document.createElement('a');
      //   container.style.height = '160px';
      //   container.style.width = '300px';
      //   container.style.background = '#999';
      //   container.style.margin = 'auto';
      //   container.style.color = 'white';
      //   container.style.fontSize = '20px';
      //   container.style.position = 'relative';
      //   container.style.textAlign = 'center';
      //   container.style.paddingTop = '140px';
      //   container.innerText = '这是一条广告';

      //   document.body.style.display = 'flex';
      //   document.body.style.height = '100vh';
      //   a.style.display = 'block';
      //   span.innerText = 'X';
      //   a.style.position = 'absolute';
      //   a.style.right = '10px';
      //   a.style.top = '0px';

      //   a.href = 'javascript:;';
      //   a.style.color = 'white';
      //   a.style.textDecoration = 'none';
      //   a.appendChild(span);
      //   container.appendChild(a);
      //   document.body.appendChild(container);
      //   a.onclick = function () {
      //     container.style.display = 'none';
      //     setTimeout(function () {
      //       container.style.display = 'block';
      //     }, 4000);
      //   };
      //4、实现三个按钮 点击每个按钮显示对应div ，且 按钮会加上背景颜色，也就是指点现在点击的是哪个按钮
    //   var arr_btn = [];
    //   var arr_div = [];
    //   for (let i = 0; i < 3; i++) {
    //     let btn = document.createElement('button');
    //     let div = document.createElement('div');
    //     div.style.height = '150px';
    //     div.style.width = '150px';
    //     div.style.display = 'inline-block';
    //     div.style.display = 'none';
    //     div.style.position = 'absolute';
    //     div.style.top = '200px';
    //     div.style.background = '#999';
    //     div.style.left = '10px';

    //     div.innerHTML = 'div' + (i + 1);
    //     btn.innerText = 'btn' + (i + 1);
    //     btn.style.background ='rgb(240,240,240)'
    //     btn.style.border='1px black solid'
    //     arr_btn.push(btn);
    //     arr_div.push(div);
    //   }
    //   arr_btn.forEach((item, index) => {
    //     document.body.appendChild(item);
    //     document.body.appendChild(arr_div[index]);
    //     item.onclick = function () {
    //       arr_div.forEach((item) => {
    //         item.style.display = 'none';
    //       });
    //       arr_btn.forEach((item1) => {
    //         item1.style.background = 'rgb(240,240,240)';
    //       });
    //       this.style.background = 'pink';

    //       arr_div[index].style.display = 'inline-block';
    //     };
    //   });
    </script>
  </body>
</html>
